<template>
    <section class="chat-item" v-for="chat in props" :key="chat.id">
        <section class="chat-item-row" v-if="chat.senderUserId !== userId && (chat.senderUserNickname || chat.receiverUserNickname)">
            <img class="user-avatar" @error="defaultAvatar" :src="chat.receiverUserAvatar || chat.senderUserAvatar"
                alt="">
            <section class="user-chat-content">
                <span class="user-name">{{ chat.senderUserNickname || chat.receiverUserNickname }}</span>
                <p class="message-content" v-if="chat.types === 1">
                    {{ chat.content }}</p>

                <p class="message-content" v-if="chat.types === 2">
                    <img class="message-image" :src="chat.imageUrl || chat.content"
                        @click="previewImage(chat)" alt="">
                </p>
                <p class="chat-date">
                    {{ chat.time }}
                </p>
            </section>
        </section>
        <section class="chat-item-row myself-chat" v-if="chat.senderUserId === props.userId">

            <section class="user-chat-content">
                <span class="user-name">{{ chat.senderUserNickname || chat.receiverUserNickname  }}</span>
                <p class="message-content" v-if="chat.types === 1">
                    {{ chat.content }} 
                </p>
                <p class="message-content" v-if="chat.types === 2">
                    <img class="message-image" :src="chat.imageUrl || chat.content"
                        @click="previewImage(chat)" alt="">
                </p>
                <p class="chat-date">
                    {{ chat.time }}
                </p>
            </section>
            <img class="user-avatar" @error="defaultAvatar" :src="chat.receiverUserAvatar || chat.senderUserAvatar" alt="">
        </section>

    </section>
    <el-dialog style="padding: 20px !important; background-color: rgb(39, 39, 39);" v-model="dialogVisible" title="图片预览"
        width="80%" :before-close="handleClose" append-to-body>
        <section style="width: 100%;"> 
            <img :src="imgUrl" class="preview-image" alt="">
        </section>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleClose">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { defaultAvatar } from '@/utils' 
// log(defaultAvatar())
const props = defineProps({
    messageData: {
        type: Array,
        default: () => ([])
    },
    userId: {
        type: Number,
        default: 0
    }
})

const dialogVisible = ref(false)
const imgUrl = ref('')

const handleClose = () => {
    dialogVisible.value = false
    imgUrl.value = ''
}

const previewImage = (item) => {
    imgUrl.value = item.content ? item.content : item.imageUrl
    dialogVisible.value = true
}

</script>

<style lang="scss" scoped>
.preview-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

.myself-chat {
    justify-content: end;

    .user-name {
        text-align: right;
    }

    .user-chat-content {
        flex-direction: column;
        display: flex;
        justify-content: end;
    }

    .user-avatar {
        margin: 0 0 0 10px;
    }

    .message-content {
        margin: 0 0px 0 50px !important;
    }
    .chat-date {
        text-align: right !important;
    }
}

$previewImageSize: 70px;
.message-image {
    display: block;
    height: $previewImageSize;
    width: $previewImageSize;
    min-height: $previewImageSize;
    min-width: $previewImageSize;
    object-fit: cover;
    cursor: pointer;
}

.chat-item {
    margin-left: 10px;
    padding: 12px 0;

    .chat-item-row {
        display: flex;
        align-items: self-start;

        .user-name {
            color: #313131;
        }

        .message-content {
            color: #3a3a3a;
            font-size: 15px;
            background: #e3f3ff;
            padding: 10px;
            border-radius: 4px;
            margin: 0 60px 0 0;
            flex-wrap: wrap;
            word-break: break-all;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            min-height: 40px;
            object-fit: cover;
            border-radius: 5px;
            display: block;
            margin-right: 10px;
        }
    }
    .chat-date {
        text-align: left; 
    }
}
.chat-date { 
    font-size: 12px;
    font-weight: normal;
}

</style>